<template>
  <div>
    <el-row :gutter="16">
      <el-col :span="24">
        <div class="statistic-card" style="text-align: center">
          <el-statistic :value="data.orderNum">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                系统总订单数
                <el-tooltip effect="dark" content="系统中您公司所属的订单总数量" placement="top">
                  <el-icon style="margin-left: 4px" :size="12">
                    <Warning />
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
          </el-statistic>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="24">
      <el-col :span="24" style="margin-top: 2%">
        <el-card style="float: left; width: 49%">
          <div><RenderChart /></div>
        </el-card>
        <el-card style="float: right; width: 49%; margin-left: 2%">
          <div><DoubleCharts /></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="margin-top: 2%">
      <el-card style="width: 100%">
        <div><Chart /></div>
      </el-card>
    </el-row>
    <Alter/>
  </div>
</template>

<script lang="ts" setup>
import { ArrowRight, CaretBottom, CaretTop, Warning } from '@element-plus/icons-vue';
import Chart from './Chart.vue';
import DrawPieChart from './DrawPieChart.vue';
import RenderChart from './RenderChart.vue';
import DoubleCharts from './DoubleCharts.vue';
import { tbCountOrderDate } from '/@/api/tb/tbOrderStatus';
import { ref } from 'vue';
import Alter from '../tbMyOrder/components/Alter.vue';

const data = ref({});

tbCountOrderDate().then((res) => {
  data.value = res.data;
});
</script>

<style scoped>
:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}
</style>
